@import './variables.scss';
@import './mixins.scss';
@import './common.scss';

// 重置样式
page,
view,
text,
image,
button,
input,
textarea {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

page {
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $text-color-primary;
  background-color: $bg-color-base;
  min-height: 100vh;
}

// 通用工具类
.text-primary { color: $primary-color; }
.text-success { color: $success-color; }
.text-warning { color: $warning-color; }
.text-error { color: $error-color; }
.text-info { color: $info-color; }

// 文本对齐
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

// 字重
.font-normal { font-weight: normal; }
.font-bold { font-weight: bold; }

// 显示属性
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

// Flex布局工具类
.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

// 外边距工具类
.m-xs { margin: $spacing-xs; }
.m-sm { margin: $spacing-sm; }
.m-md { margin: $spacing-md; }
.m-lg { margin: $spacing-lg; }
.m-xl { margin: $spacing-xl; }

// 内边距工具类
.p-xs { padding: $spacing-xs; }
.p-sm { padding: $spacing-sm; }
.p-md { padding: $spacing-md; }
.p-lg { padding: $spacing-lg; }
.p-xl { padding: $spacing-xl; }

// 边框工具类
.border {
  border: 2rpx solid $border-color-base;
}

.rounded {
  border-radius: $border-radius-base;
}

.rounded-lg {
  border-radius: $border-radius-lg;
}

// 阴影工具类
.shadow-1 {
  @include box-shadow(1);
}

.shadow-2 {
  @include box-shadow(2);
}

.shadow-3 {
  @include box-shadow(3);
}

// 文本截断工具类
.truncate {
  @include text-truncate;
}

.truncate-2 {
  @include multi-line-truncate(2);
}

.truncate-3 {
  @include multi-line-truncate(3);
}

.primary-color-gradient-box {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #1F86A7, 25%, #F4F4F4, 45%, transparent);
}
